---
title: Getting Started
---

import IntroCodeSamples from '../../components/intro-code-samples'

# Getting Started

Install Theme UI.

```sh
npm install theme-ui @emotion/react
```

Create a theme object to include custom color, typography, and layout values.

<IntroCodeSamples.ThemeCreation />

Pass your `theme` object to `ThemeUIProvider`.

<IntroCodeSamples.BasicUsage />

<Note>

If you’re using Gatsby, see the
[Getting Started with Gatsby](/getting-started/gatsby) page.

</Note>

## `sx` prop

Use the `sx` prop throughout your application to add styles based on your theme
to any component. Enable the `sx` prop by adding the
`/** @jsxImportSource theme-ui */` comment to the top of your file or
configuring `jsxImportSource` in your Babel config.

The `sx` prop lets you add any valid CSS to an element, while using values from
your theme to keep styles consistent. You can think of the style object that the
`sx` prop accepts as a _superset_ of CSS.

```jsx
/** @jsxImportSource theme-ui */

export default (props) => (
  <div
    sx={{
      fontWeight: 'bold',
      fontSize: 4, // picks up value from `theme.fontSizes[4]`
      color: 'primary', // picks up value from `theme.colors.primary`
    }}
  >
    Hello
  </div>
)
```

<Note>

Confused about this `@jsxImportSource` comment? Read more about
[JSX Pragma](/guides/jsx-pragma).

</Note>

## Responsive styles

The `sx` prop also supports using arrays as values to change properties
responsively with a mobile-first approach.

```jsx
/** @jsxImportSource theme-ui */

export default (props) => (
  <div
    sx={{
      // applies width 100% to all viewport widths,
      // width 50% above the first breakpoint,
      // and 25% above the next breakpoint
      width: ['100%', '50%', '25%'],
    }}
  />
)
```

<Note>

This API originated in [Styled System][] and is intended as
[a terser syntax for applying responsive styles](https://styled-system.com/guides/array-props)
across a singular dimension. The values used for media queries can be defined in
a [`theme.breakpoints`](/theming/#breakpoints) array.

</Note>

If you prefer standard CSS syntax, you can use nested objects for responsive
styles as well.

```jsx
<div
  sx={{
    width: '100%',
    '@media screen and (min-width: 40em)': {
      width: '50%',
    },
  }}
/>
```

## Components

Theme UI includes a library of primitive UI components, which can be completely
customized with your theme and include support for
[variants](/components/variants). You can use variants to encapsulate more
complex, component-specific styles that can be changed with props. Import and
use these components to handle layout, images, forms, and more.

```jsx
/** @jsxImportSource theme-ui */
import { Box, Label, Input, Button } from 'theme-ui'

export default (props) => (
  <Box sx={{ display: 'flex', alignItems: 'center', mb: 4 }}>
    <Label htmlFor="search">Search</Label>
    <Input id="search" name="search" {...props} />
    <Button>Go</Button>
  </Box>
)
```

See the [Components](/components) documentation for more.

[styled system]: https://styled-system.com
